import React from 'react'
import { connect } from 'dva'
import { Card, Button,Collapse } from 'antd'
import {  NoData } from '../../../components'

/**
 * NetValueEstimationList 净值估算统计表
 */
const NetValueEstimationList = ({
  data
}) => {
  if(data){
    return(
      <table>
        <thead>
          <tr>
            {/*<th>时间</th>
            <th>净值</th>
            <th>涨幅</th>*/}
            <th>净值:</th>
            <th>{data.value || '-'}</th>
            <th>涨幅:</th>
            <th>{(data.increase === 0 || data.increase) && `${Math.signFigures(data.increase * 100)}%` || '-'}</th>
            <th>时间:</th>
            <th>{data.date || '-'}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            {/*<td>{data.date||'-'}</td>
            <td>{data.value||'-'}</td>
            <td>{(data.increase===0||data.increase)&&`${Math.signFigures(data.increase * 100)}%`||'-'}</td>*/}
          </tr>
        </tbody>
      </table>
    )
  }else{
    return null
  }
}


/**
 * NetValueEstimationCharts 净值估算图
 */
import { IECharts } from '../../../components'
const NetValueEstimationCharts = ({
  data,
  productName = '',
  colors = ['#3CADFF','#FA5F5E']
}) => {
  let myProps
  if(data&&data.length){
    myProps = {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross'
          }
      },
        color: colors,
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // title: {
        //   text: `${productName}净值估算图`,
        //   left: 20,
        //   textStyle: {
        //     color: '#4a4a4a',
        //     fontSize: 14,
        //     lineHeight: 20,
        //     fontWeight: 'bold'
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.map(item => item.date),
          splitLine: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: '#999',
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          min:function(value){
            return value.min
          },
          max:function(value){
            return value.max
          },
          splitLine: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: '#999',
            fontSize: 12,
          }
  
        },
        series: [
          {
            name: '净值',
            yAxisIndex: 0,
            type: 'line',
            smooth: true,
            data: data.map(item => item.value)
          },
          // {
          //   name: '涨幅',
          //   yAxisIndex: 1,
          //   type: 'line',
          //   smooth: true,
          //   data: data.map(item=>item.increase*100)
          // }
        ]
      }
    }
  }
  

  return (
    <Collapse defaultActiveKey={['1']}>
    <Collapse.Panel header={`${productName}净值估算图`} key="1">
   
    {
      myProps&& <div style={{ height: 477, background: '#fff' }}><IECharts {...myProps} resizable={true} /></div>
    }
      
    
    </Collapse.Panel>
  </Collapse>
    
  )
}

/**
 * NetValueEstimation 净值估算
 * 引用组件
 * NetValueEstimationList 净值估算统计表
 * NetValueEstimationCharts 净值估算图
 */
// import NetValueEstimationCharts from './NetValueEstimationCharts'

class NetValueEstimation extends React.Component {
  state = {
    data: this.props.realTimeNetValue
  }
  componentDidMount() {
    this.fetchData(this.props)
  }
  componentWillReceiveProps(nextProps) {
    if ((nextProps.lPortId !== this.props.lPortId) || (nextProps.cBenchCode !== this.props.cBenchCode)) {
      this.fetchData(nextProps)
    }
    if (nextProps.realTimeNetValue !== this.props.realTimeNetValue) {
      this.setState({
        data: nextProps.realTimeNetValue
      })
    }
  }
  fetchData = (props) => {
    this.props.dispatch({
      type: 'combinatorialAnalysis/getRealTimeNetValue',
      payload: props
    })
  }
  render() {
    const { realtime, list } = this.state.data
    const extra = <Button size="small" icon="sync" ghost onClick={this.fetchData.bind(this, this.props)} style={{ height: 18 }}>查看最新</Button>

    return (
      <Card title='净值估算' extra={extra} className="netValueEstimation">
      {
        list&&list.length&&[<NetValueEstimationList data={realtime} />,<NetValueEstimationCharts data={list} productName={this.props.productName} />]||<NoData />
      }
      </Card>
    )
  }
}

NetValueEstimation.defaultProps = {
  lPortId: null,
  cBenchCode: null,
  realTimeNetValue:{
    realtime: {
      "date": "9:30",
      "value": 0,
      "increase": 3
    },
    list: [
      {
        "date": "9:30",
        "value": 0,
        "increase": 3
      },
      {
        "date": "10:30",
        "value": 0,
        "increase": 3
      },
      {
        "date": "11:30/13:00",
        "value": 0,
        "increase": 3
      },
      {
        "date": "14:00",
        "value": 0,
        "increase": 3
      },
      {
        "date": "15:00",
        "value": 0,
        "increase": 0
      }
    ]
  }
}

export default connect()(NetValueEstimation)
